<template>
  <div class="dashboard-editor-container">
    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row :gutter="32" style="padding: 16px 16px 0; margin-bottom: 32px">
      <el-card>
        <div slot="header" class="clearfix">
          <span>生产进度</span>
        </div>
        <div class="table-view">
          <el-table class="table1" :data="outstandingQuantityList">
            <el-table-column
              label="交单日期"
              width="140"
              align="center"
              prop="label"
            />
            <el-table-column
              label="待完成数量"
              width="140"
              align="center"
              prop="value"
            >
              <template slot-scope="{ row }">
                <el-link type="primary" @click="handleDetail(row)">{{
                  row.value
                }}</el-link>
              </template>
            </el-table-column>
          </el-table>
          <div class="table2">
            <el-tabs
              v-model="activeName"
              @tab-click="
                () => {
                  queryParams.pageNum = 1;
                  getList();
                }
              "
            >
              <el-tab-pane label="窗帘" name="CL"></el-tab-pane>
              <el-tab-pane label="窗幔" name="CM"></el-tab-pane>
              <el-tab-pane label="其他" name="QT"></el-tab-pane>
              <el-tab-pane label="成品原料" name="CPYL"></el-tab-pane>
            </el-tabs>
            <el-table :data="list" :height="600" v-loading="loading">
              <el-table-column
                label="加工单号"
                align="center"
                prop="productId"
                width="100"
              ></el-table-column>
              <el-table-column
                label="营销推送"
                align="center"
                prop="marketingPush"
              />
              <el-table-column
                label="客户名"
                align="center"
                prop="clientName"
                width="150"
              />
              <el-table-column
                label="订单备注"
                align="center"
                prop="orderRemark"
                width="150"
              />
              <el-table-column
                label="计划备注"
                align="center"
                prop="remark"
                min-width="200"
              ></el-table-column>
              <el-table-column
                label="销售单号"
                align="center"
                prop="salesOrderNumber"
              />
              <el-table-column
                label="订单详情"
                align="center"
                prop="orderDetails"
                min-width="200"
              />
              <el-table-column
                label="下单日期"
                align="center"
                prop="orderDate"
                width="150"
              >
                <template slot-scope="scope">
                  <span>{{
                    parseTime(scope.row.orderDate, "{y}-{m}-{d}")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="交单日期"
                align="center"
                prop="submitDate"
                width="150"
              >
                <template slot-scope="scope">
                  <span>{{
                    parseTime(scope.row.submitDate, "{y}-{m}-{d}")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态" align="center" prop="state">
                <template slot-scope="{ row }">
                  <el-link
                    type="primary"
                    @click="
                      () => {
                        schedule = {
                          show: true,
                          type: activeName,
                          data: {
                            ...row,
                          },
                        };
                      }
                    "
                    >{{ row.state }}</el-link
                  >
                </template>
              </el-table-column>
              <el-table-column label="打印状态" align="center" prop="isPrint">
                <template slot-scope="{ row }">
                  <span v-if="`${row.isPrint}` === '1'">已打印</span>
                  <span v-else style="color: red">未打印</span>
                </template>
              </el-table-column>
              <el-table-column
                label="最近工序"
                align="center"
                prop="processName"
              >
                <template slot-scope="{ row }">
                  {{ row.processName ? row.processName.split(",")[0] : "" }}
                </template>
              </el-table-column>
              <el-table-column
                label="工序时间"
                align="center"
                prop="updateTime"
                width="150"
              >
                <template slot-scope="{ row }">
                  {{ row.processName ? row.processName.split(",")[1] : "" }}
                </template>
              </el-table-column>
              <el-table-column
                label="工单打印时间"
                align="center"
                prop="orderDate"
                width="150"
              >
                <template slot-scope="scope">
                  <span>{{
                    parseTime(scope.row.printTimeType0, "{y}-{m}-{d}")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="水洗单打印时间"
                align="center"
                prop="orderDate"
                width="150"
              >
                <template slot-scope="scope">
                  <span>{{
                    parseTime(scope.row.printTimeType1, "{y}-{m}-{d}")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="房间" align="center" prop="roomName" />
              <el-table-column
                label="发货单号"
                align="center"
                prop="deliveryNoteNumber"
              />
              <el-table-column
                label="窗帘详情"
                align="center"
                prop="curtainInfo"
                min-width="300"
                show-overflow-tooltip
              />
              <el-table-column
                label="销售备注"
                align="center"
                prop="salesRemark"
                min-width="200"
              />
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </div>
      </el-card>
    </el-row>

    <!-- <el-row style="background:#fff;padding:16px 16px 0; margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row> -->

    <!-- <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row> -->

    <!-- 进度 -->
    <schedule-view
      v-if="schedule.show"
      :show.sync="schedule.show"
      v-bind="schedule"
    ></schedule-view>
  </div>
</template>

<script>
import { listWorkorder } from "@/api/mes/pro/workorder";
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";
import ScheduleView from "@/views/mes/pro/splitOrder/mods/schedule.vue";
import {
  getList1,
  getList2,
  getList3,
  getList4,
  getList5,
  getList6,
  getList7,
  getList8,
  getOutstandingQuantity,
} from "@/api/home";

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
};

export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    ScheduleView,
  },
  data() {
    return {
      loading: false,
      workorderList: [],
      lineChartData: lineChartData.newVisitis,
      outstandingQuantityList: [],
      list: [],
      activeName: "CL",
      date: "",
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 100,
      },
      schedule: {
        show: false,
        data: null,
      },
    };
  },
  created() {
    // 测试git保存
    // this.getList();
    this.getOutstandingQuantity();
    this.getList();
  },
  methods: {
    getOutstandingQuantity() {
      getOutstandingQuantity().then(({ data }) => {
        const list = [];
        for (const key in data) {
          if (Object.hasOwnProperty.call(data, key)) {
            const element = data[key];
            list.push({
              label: key,
              value: element,
            });
          }
        }
        const item = list.find((e) => e.label === "今天以前");
        const tmpList = list.filter((e) => e.label !== "今天以前");
        this.outstandingQuantityList = [item, ...tmpList.reverse()];
      });
    },
    handleDetail(row) {
      if (row.label === "今天以前") {
        this.date = null;
      } else {
        this.date = row.label;
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      switch (this.activeName) {
        case "CL":
          if (this.date) {
            getList5({
              ...this.queryParams,
              date: this.date,
            })
              .then((res) => {
                this.list = res.rows || [];
                this.total = res.total;
              })
              .finally(() => {
                this.loading = false;
              });
          } else {
            getList1({
              ...this.queryParams,
            })
              .then((res) => {
                this.list = res.rows || [];
                this.total = res.total;
              })
              .finally(() => {
                this.loading = false;
              });
          }
          break;
        case "CM":
          if (this.date) {
            getList6({
              ...this.queryParams,
              date: this.date,
            })
              .then((res) => {
                this.list = res.rows || [];
                this.total = res.total;
              })
              .finally(() => {
                this.loading = false;
              });
          } else {
            getList2({
              ...this.queryParams,
            })
              .then((res) => {
                this.list = res.rows || [];
                this.total = res.total;
              })
              .finally(() => {
                this.loading = false;
              });
          }
          break;
        case "QT":
          if (this.date) {
            getList7({
              ...this.queryParams,
              date: this.date,
            })
              .then((res) => {
                this.list = res.rows || [];
                this.total = res.total;
              })
              .finally(() => {
                this.loading = false;
              });
          } else {
            getList3({
              ...this.queryParams,
            })
              .then((res) => {
                this.list = res.rows || [];
                this.total = res.total;
              })
              .finally(() => {
                this.loading = false;
              });
          }
          break;
        case "CPYL":
          if (this.date) {
            getList8({
              ...this.queryParams,
              date: this.date,
            })
              .then((res) => {
                this.list = res.rows || [];
                this.total = res.total;
              })
              .finally(() => {
                this.loading = false;
              });
          } else {
            getList4({
              ...this.queryParams,
            })
              .then((res) => {
                this.list = res.rows || [];
                this.total = res.total;
              })
              .finally(() => {
                this.loading = false;
              });
          }
          break;

        default:
          break;
      }
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.table-view {
  display: flex;
  .table1 {
    width: 300px;
  }
  .table2 {
    width: calc(100% - 300px);
  }
}
</style>
